<template>
    <skeleton v-if="loading"></skeleton>
    <div v-else>
        <div class="header">
            <div class="left">
                <img :src="sculpture" alt="">
            </div>
            <div class="right">
                <div class="top">
                    <p>马了丁大餐厅</p>
                    <p>10:00-23:00</p>
                    <button class="one">营业中</button>
                </div>
                <div class="foot">
                    <p>
                        <van-icon name="location-o" />北京市朝阳区石佛营路x号
                    </p>
                    <p>
                        <van-icon class="phone" name="phone-o" />8008208820
                    </p>
                </div>
            </div>

        </div>
        <!-- 轮播 -->
        <van-swipe class="swipe" :autoplay="3000" lazy-render>
            <van-swipe-item class="box" v-for="image in banner" :key="image.content">
                <img :src="image.img" />
            </van-swipe-item>
        </van-swipe>

        <!-- 点单页面 -->
        <van-grid class="Sudoku" direction="horizontal" center icon-size="55" :gutter="1" clickable :column-num="2">
            <van-grid-item :icon="pic[0].img" text="外卖点餐" to="/orderdel" />
            <van-grid-item :icon="pic[1].img" text="堂食点餐" to="/orderdel" />
        </van-grid>


        <van-grid class="Sudoku" center icon-size="45" :gutter="0" clickable :column-num="3">
            <van-grid-item :icon="pic[2].img" text="餐厅信息" to="/infomation" />
            <van-grid-item :icon="pic[3].img" text="积分商城" to="/wallet" />
            <van-grid-item :icon="pic[4].img" text="优惠券" to="/coupon" />
        </van-grid>


        <!-- 底部栏 -->
        <van-tabbar>
            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="search" to="/takeout">订单</van-tabbar-item>
            <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup lang="ts">
import { bannerGet } from '../../api/home';
import { sculptureGet } from '../../api/home'
import { ref, onMounted } from 'vue'
import { getPic } from '../../api/orderDel';
import skeleton from '../skeleton/index.vue'
let integrate: number = Number(localStorage.getItem("integrate"))
if (localStorage.getItem("integrate") == null) {
    localStorage.setItem("integrate", "200");
}
interface Banner {
    img: string,
    content: string
}
const loading = ref(true)
onMounted(() => {
    setTimeout(() => {
        loading.value = false
    }, 1000)
})

//轮播数据获取
let banner = ref<Array<Banner>>([])
bannerGet().then(res => {
    banner.value = res.data.results
})//拿到数据库数据
// console.log(res);

//头像的数据获取

let sculpture = ref()
sculptureGet().then(res => {
    sculpture.value = res.data.results[0].img;
})

console.log(sculpture);

//详情图片
interface indexPic {
    img: string
}
const pic = ref()
getPic().then(res => {
    pic.value = res.data.results
})

// console.log(res2)
// console.log(pic)
// console.log(pic.value[0].img)
</script>



<style lang="scss" scoped>
.header {
    width: 100%;
    height: 10rem;
    border-top: 1rem solid rgba(242, 242, 242);
    display: flex;

    img {
        border-radius: 50%;
        width: 9rem;
        height: 9rem;
        margin-top: 3rem;
        margin-left: 2rem;
        // border: 1rem solid rgba(246, 246, 246);
    }

    .right {
        padding-top: 2rem;
        flex: 1;

        .top {
            position: relative;

            p:nth-child(1) {
                font-size: 2.5rem;
            }

            p {
                margin-left: 2rem;
            }

            button {
                margin-right: 2rem;
                border: none;
                border-radius: 1.5rem;
                background-color: rgba(7, 193, 96);
                width: 10rem;
                height: 5rem;
                color: #ffffff;
            }

            .one {
                position: absolute;
                right: 0;
                top: 0;
            }
        }
    }

    .foot {
        padding-top: 0.5rem;
        display: flex;
        justify-content: space-between;

        p:nth-child(2) {
            margin-right: 2rem;
        }
    }
}

/* 第二栏 */
.swipe {
    width: 100%;
    margin-top: 10rem;
    border-top: 3rem solid rgba(242, 242, 242);
    // border-bottom: 3rem solid rgba(242, 242, 242);

    .box {
        width: 100%;

        img {
            width: 100%;
            height: 40rem;
        }
    }
}


// 第三栏
.Sudoku {
    height: 25rem;
}
</style>